import React from 'react'
import { Layout,Image} from 'antd';
import Table from '../Table'
import Editor from "../Editor"
import "./tr.css"
import {useSelector,useDispatch,connect} from 'react-redux'


const {Content} = Layout;

const Culture = () => {
  const citculList = useSelector(state=> state.citcul.cityCulutureList)
  const valueList = useSelector(state=> state.value.valueList)
  const dispatch = useDispatch()
  const columns = [
    {
        title: '文化标题',
        dataIndex: 'cultureTitle',
        key: 'cultureTitle',
    },
   
    
    {
        title: '历史文化图片',
        key: 'cultureImg',
        width:'150px',
        height:'33px',
        hideInSearch:true,
        dataIndex: 'cultureImg',
        ellipsis:true,
        
        render:(text,record)=>{
          if((record.cultureImg).search(';') == -1){
            return(
              <Image.PreviewGroup>
                <Image width={30} height ={30} src={record.cultureImg} />
              </Image.PreviewGroup>
            )

          }else{
            return (
              <Image.PreviewGroup>
                {
                  (record.cultureImg).split(";").map((items, index) =>{
                    return <Image width={30} height ={30} src={items} />

                  }
                  )
                }
              </Image.PreviewGroup>
              
            )
          }
        }

        },
    {
      title: '历史文化内容',
      key: 'cultureCon',
      dataIndex: 'cultureCon',
      valueType: 'text',
      ellipsis:true
    },
    {
        title: '操作',
        key: 'option',
        width: 120,
        valueType: 'option',
        render: (text,record,index,action) => [<div onClick={()=>{
          dispatch({type:'get',con:record});console.log(valueList)
        }}><Editor ques={citycul} url="http://49.233.107.127:2002/city/citycul"/></div>
        , <a onClick={async ()=>{
          console.log(record)
          await fetch(`http://49.233.107.127:2002/city/citycul/${record.cultureID}/${record.cityID}`,{
          method:'delete',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          }
        })
        dispatch({type:'delete',content:['delete']})
        }}>删除</a>]
      }];

    const right = {}

    const citycul = [
      {name:'cultureID',label:'历史文化id',tooltip:'最长为24位',placeholder:'请输入历史文化id'},
      {name:'cityID',label:'城市id',tooltip:'最长为24位',placeholder:'输入城市id'},
      {name:'cultureTitle',label:'历史文化标题',tooltip:'最长为24位',placeholder:'输入历史文化标题'},
      {name:'cultureImg',label:'历史文化图片',placeholder:'上传图片'},
      {name:'cultureCon',label:'历史文化内容',placeholder:'请输入历史文化内容'}
  ]

 
    return (
        <Content className="site-layout-background" style={{paddingLeft: 10,margin: 0,minHeight: 280,}}>
          {/* <h3>城市文化列表管理</h3> */}
        <Table title="城市文化列表管理" columns={columns} right={right} url="http://49.233.107.127:2002/city/citycul" ques={citycul}/>
        </Content>
    )
}

export default connect()(Culture)
